<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function (){
            /*
            * 创建广州节点
            *
            * */
            myClick("btn01",function(){

                //创建广州节点

                //document.createElement()
                //可以永远创建一个元素节点对象，他需要一个标签名作为参数，并将创建好的对象作为返回值返回
                var li = document.createElement("li");

                var gzText = document.createTextNode("广州");
                //将广州设置自节点
                /*
                * appendChild()
                *   向一个父节点中添加一个新的自节点
                *   语法：父节点.appendChild(子节点);
                *
                * */
                li.appendChild(gzText);

            } );
            myClick("btn2",function (){

                var  li = document.createElement("li");
                var  gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                var bj = document.getElementById("bj");

                var city = document.getElementById("city");

                /*
                * insertBefore()
                *   可以在指定的自节点前插入新的子节点
                *   语法：
                *       父节点.insertBefore(新节点，旧节点)
                *
                *
                * */

                city.insertBefore(li,bj);

            });

            myClick("btn3",function (){
                var  li = document.createElement("li");
                var  gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                var bj = document.getElementById("bj");

                var city = document.getElementById("city");



                /*
                * replaceChild
                *   替换字节点
                *
                * */
                city.replaceChild(li,bj);


            })

            myClick("btn4",function (){

                var bj = document.getElementById("bj");

                var city = document.getElementById("city");


                /*
                * removeChild()
                *   可以删除一个字节点
                *   语法：父节点.removeChild(子节点)
                *
                * 子节点.parentNode.removeChild(子节点);
                * */
                //city.removeChild(bj);
                bj.parentNode.removeChild(bj);

            })

            myClick("btn5",function (){
                var city = document.getElementById("city");
                alert(city.innerHTML);

            });
            myClick("btn6",function (){


                var bj = document.getElementById("bj");
                bj.innerHTML = "昌平";
            });



        }
    </script>
</head>
<body>
    <div id="total">
        <div class="inner">
            <p>你喜欢那个城市？</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
        </div>
    </div>
</body>
</html>